<template>
  <div name="experience" class="exp-panel q-pa-md q-gutter-sm column">
    <panel-section
      class="work"
      icon="mdi-briefcase"
      color="yellow"
      title="WORK"
    >
      <div slot="title" class="title">WORK</div>
      <div class="content">
        <div class="work-name">Co-Founder at Pic1 Studio</div>
        <div class="work-location">Melbourne, Australia</div>
        <div class="work-date">January 2013 - Present</div>
        <div
          class="work-detail"
        >Pic1 Studio is a collective of design creatives, based in Melbourne Australia, who provide conceptual art services and education catered tow...</div>
      </div>
    </panel-section>
    <panel-section
      class="skill"
      icon="mdi-android-studio"
      color="pink-8"
      title="SKILL"
    >
      <div class="title" slot="title">SKILL</div>
      <div class="content row q-gutter-sm q-pa-xs">
        <q-badge outline>Character Design</q-badge>
        <q-badge outline>3D Modelling</q-badge>
        <q-badge outline>Illustration</q-badge>
        <q-badge outline>Concept Art</q-badge>
        <q-badge outline>Mecha Design</q-badge>
      </div>
    </panel-section>
    <panel-section
      class="software"
      color="primary"
      icon="mdi-monitor"
      title="SOFTWARE"
    >
      <div slot="title" class="title">SOFTWARE</div>
      <div class="content row q-pa-sm q-gutter-md">
        <div class="row items-center">
          <q-icon
            class="q-mr-xs"
            name="img:static/pngs/lg-photoshop.png"
            size="28px"
          />
          <div>Photoshop</div>
        </div>
        <div class="row items-center">
          <q-icon
            class="q-mr-xs"
            name="img:static/pngs/lg-zbrush.png"
            size="28px"
          />
          <div>Zbrush</div>
        </div>
        <div class="row items-center">
          <q-icon
            class="q-mr-xs"
            name="img:static/pngs/lg-keyshot.png"
            size="28px"
          />
          <div>Keyshot</div>
        </div>
      </div>
    </panel-section>
    <panel-section
      class="education"
      icon="mdi-school"
      color="green"
      title="EDUCATION"
    >
      <div slot="title" class="title">EDUCATION</div>
      <div class="content">
        <div class="name">Monash University</div>
        <div class="subject">Bachelor of Industrial Design</div>
        <div class="subject">2005 - 2009</div>
      </div>
    </panel-section>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import PanelSection from './PanelSection.vue';

@Component({
  name: 'experience-panel',
  components: {
    PanelSection,
  },
})
export default class ExperiencePanel extends Vue {}
</script>
<style lang="stylus" scoped>
.exp-panel {
  background-color: $blue-grey-8;
  font-size: 12px;

  .work {
    .title {
      color: $yellow;
    }

    .work-name {
      font-size: 12px;
      font-weight: bold;
    }

    .work-location {
      font-size: 10px;
      color: #9ea5ad;
    }

    .work-date {
      font-size: 10px;
      color: #9ea5ad;
    }
  }

  .skill {
    .title {
      color: $pink-8;
    }
  }

  .software {
    .title {
      color: $primary;
    }

    .content {
      font-size: 12px;
      font-weight: bold;
    }
  }

  .education {
    .title {
      color: $green;
    }

    .content {
      .name {
        font-weight: bold;
      }

      .subject {
        font-size: 10px;
        color: #9EA5AD;
      }
    }
  }
}
</style>
